<template>
    <div class="pages">
        <div class="tbtn">
            <span v-for="(item, index) in tablist" @click="changeTab(index)" :class="[{ on: tabflag == index }]" :key="index">
                {{ item }}
            </span>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="0">
            <div class="hdlist">
                <div class="sin" v-for="(item, index) in listdata" :key="index">
                    <div class="ups"  @click="pageJump(item.actId)">
                        <div class="pic">
                            <img :src="item.imgJsonList[0]" alt="" />
                            <i :class="[{ pay: item.participants != 0 }]">{{ item.participants == 0 ? "免费" : "￥" + item.actMoney }}</i>
                        </div>
                        <div class="info">
                            <div class="name">{{ item.title }}</div>
                            <!-- timeType = 1同一天 -->
                            <div class="time" v-if="item.timeType == 1">{{ item.actTime }}</div>
                            <template v-else>
                                <div class="time">开始时间：{{ item.startTime }}</div>
                                <div class="time">结束时间：{{ item.endTime }}</div>
                            </template>
                            <div class="area"><i></i><span>{{ item.address }}</span></div>
                        </div>
                    </div>
                    <div class="bot">
                        <div class="show">
                            <img v-for="(p, pindex) in item.signAvatarList" :key="pindex" :src="p ? p : require('../../assets/img/tx.png')" alt="" />
                        </div>
                        <p v-if="item.isShow == 1">{{ item.showPeopleNums? item.showPeopleNums : item.signNums }}人已报名</p>
                        <div v-if="item.isPub == 1" class="regList" @click="goList(item.actId)">报名名单</div>
                        <div  @click="pageJump(item.actId)" v-if="tabflag == 0 || item.haveMySign == 1">
                            <!-- 进行中 -->
                            <template v-if="tabflag == 0">
                                <!-- <a class="go finish" v-if="item.haveMySign == 1">已报名</a> -->
                                <div v-if="item.haveMySign == 1">
                                    <!-- isCheck 0未审核 1审核通过 2审核失败 -->
                                     <a class="go sign" v-if="item.isCheck == 1 && item.signUpState == 0"><img src="../../assets/img/sign.png"/>点击签到</a>
                                     <a class="go finish" v-else-if="item.isCheck == 1 && item.signUpState == 1">已签到</a>
                                     <a class="go finish" v-else>已报名</a>
                                </div>
                                <div v-else>
                                    <template v-if="item.isOver == 1">
                                        <a class="go finish">报名已截止</a>
                                    </template>
                                    <template v-else>
                                        <!-- 免费活动 -->
                                        <div v-if="item.participants == 0">
                                            <a class="go finish" v-if="item.signState == 0">报名未开始</a>
                                            <a class="go" v-if="item.signState == 1 && item.signNums < item.signUpNums && item.actState == 0">我要报名</a>
                                            <a class="go finish" v-if="item.signState == 1 && item.signNums >= item.signUpNums">报名人数已满</a>
                                            <a class="go finish" v-if="item.signState == 2 && item.actState != 1 && item.actState != 2">报名已截止</a>
                                            <a class="go finish" v-if="item.actState == 1">活动已开始</a>
                                        </div>
                                        <!-- 付费活动 -->
                                        <div v-else>
                                            <a class="go finish" v-if="item.signState == 0">报名未开始</a>
                                            <a class="go" v-if="item.signState == 1 && item.signNums < item.signUpNums && item.actState == 0">我要报名</a>
                                            <a class="go finish" v-if="item.signState == 1 && item.signNums >= item.signUpNums">报名人数已满</a>
                                            <a class="go finish" v-if="item.signState == 2 && item.actState != 1 && item.actState != 2">报名已截止</a>
                                            <a class="go finish" v-if="item.actState == 1">活动已开始</a>
                                            <!-- <a class="go finish" v-if="item.actState == 2">活动已结束</a> -->
                                        </div>
                                    </template>
                                </div>
                            </template>
                            <!-- 完成 -->
                            <template v-else>
                                <a class="gotxt" v-if="item.haveMySign == 1">已报名</a>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>
<script>
import { active } from "@/https/api";
export default {
    name: "",
    data() {
        return {
            tabflag: 0,
            tablist: ["进行中", "已结束"],
            listdata: [],
            page: 0,
            pageSize: 10,
            loading: false,
            finished: false,
        };
    },
    mounted() {},
    methods: {
        init() {
            this.loading = true;
            this.finished = false;
            this.page = 0;
            this.listdata = [];
            this.onLoad();
        },
        async onLoad() {
            this.page++;
            const res = await active.getActList({
                state: Number(this.tabflag + 2), //1 未开始 2：进行中。3:已完成
                page: this.page,
                pageSize: this.pageSize,
            });
            this.loading = false;
            if (res.code == 1) {
                if (res.data.list.length > 0) {
                    this.listdata = this.listdata.concat(res.data.list);
                    if (res.data.list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            } else {
                this.finished = true;
            }
        },
        changeTab(index) {
            this.tabflag = index;
            this.init();
        },
        pageJump(id) {
            this.$router.push({
                path: "/activityinfo",
                query: {
                    id,
                },
            });
        },
				// 报名名单
				goList(id) {
				    this.$router.push({
				        path: "/signList",
								query: {
								    id,
								},
				    });
				},
    },
};
</script>
<style scoped>
.pages {
    padding-bottom: 2rem;
}
.tbtn {
    padding: 0.2rem 0.3rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    margin-bottom: 0.2rem;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}
.tbtn span {
    display: block;
    font-size: 0.28rem;
    color: #333;
    height: 0.6rem;
    line-height: 0.44rem;
    position: relative;
}
.tbtn span.on:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -0.15rem;
    height: 0.06rem;
    background-color: #ef6d29;
    border-radius: 0.06rem;
    width: 0.3rem;
}

.hdlist {
    margin-top: 1.2rem;
}
.sin {
    background: #fff;
    padding: 0.3rem 0.3rem 0;
    margin-bottom: 0.2rem;
}
.sin .ups {
    overflow: hidden;
}
.sin .pic {
    position: relative;
    width: 2.8rem;
    height: 1.6rem;
    float: left;
}
.sin .pic img {
    display: block;
    width: 2.8rem;
    height: 1.6rem;
    object-fit: cover;
}
.sin .pic i {
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    border-radius: 0.06rem;
    background-color: rgba(30, 192, 26, 0.8);
    padding: 0 0.12rem;
    font-size: 0.24rem;
    color: #fff;
    height: 0.4rem;
    line-height: 0.4rem;
}
.sin .pic i.pay {
    background-color: rgba(239, 109, 41, 0.8);
}
.sin .info {
    float: right;
    width: 3.8rem;
}
/* .sin .info .name{ font-size: 0.3rem; color: #333; line-height: 0.4rem;  }
.sin .info .time{ font-size: 0.28rem; color: #666; line-height: 0.4rem; margin:0.12rem 0 0.3rem;  }
 */
.sin .info .name {
    font-size: 0.3rem;
    color: #333;
    line-height: 0.4rem;
    margin-bottom: 0.04rem;
}
.sin .info .time {
    font-size: 0.24rem;
    color: #666;
    line-height: 0.36rem;
}
.sin .info .area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.24rem;
    color: #999;
    line-height: 0.4rem;
    margin-top: 0.1rem;
}
.sin .info .area i {
    background: url(../../assets/img/icon53.png) center bottom / 0.21rem 0.27rem no-repeat;
    display: block;
    width: 0.21rem;
    height: 0.27rem;
    margin-right: 0.12rem;
}
.sin .info .area span{
    width: 3rem;
    white-space:nowrap;        
	overflow:hidden;          
	text-overflow:ellipsis;   
}
.sin .bot {
    margin-top: 0.36rem;
    border-top: 0.02rem solid #dbdbdb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0;
}
.sin .bot .show {
    overflow: hidden;
    max-width: 2rem;
}
.sin .bot .show img {
    display: block;
    width: 0.44rem;
    height: 0.44rem;
    margin-left: -0.22rem;
    float: left;
    border-radius: 50%;
    overflow: hidden;
}
.sin .bot .show img:first-child {
    margin-left: 0;
}
.sin .bot p {
    margin: 0 0.2rem;
    flex: 1;
}
.sin .bot .go {
    height: 0.56rem;
    line-height: 0.56rem;
    padding: 0 0.3rem;
    border-radius: 0.1rem;
    background-color: #ef6d29;
    font-size: 0.28rem;
    color: #fff;
    display: block;
}
.sin .bot .go.finish {
    background-color: #dbdbdb;
}
.sin .bot .sign{
    display: flex;
    align-items: center;
}
.sin .bot .sign img{
    width: .25rem;
    height: .3rem;
    margin-right: .1rem;
}
.sin .bot .gotxt {
    height: 0.56rem;
    line-height: 0.56rem;
    padding: 0;
    font-size: 0.24rem;
    color: #999;
}
.regList{
	width: 1.56rem;
	height: .57rem;
	border: 1px solid #EF6D29;
	border-radius: .10rem;
	font-size: .28rem;
	color: #EF6D29;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: .2rem;
}
</style>
